<template>
    <div>
        <button @click="flag = !flag">切换</button>
        <!-- 自定义指令，传参 .aaa , 加修饰符 .xiao, 指令值：{background: 'red'} -->
        <!-- 组件/元素变化 执行周期：显示时 是 created、beforeMount、mounted  ， 移除时：beforeUnmount 、unmounted -->
        <!-- <A v-if="flag" v-move.aaa.xiao="{background: 'red'}"></A> -->
        <!-- v-show 执行周期：beforeUpdate 、updated  -->
        <!-- <A v-show="flag" v-move.aaa.xiao="{background: 'red'}"></A> -->
        <!-- 值变化 执行周期：beforeUpdate 、updated -->
        <A v-move.aaa.xiao="{background: 'green', flag: flag }"></A>
    </div>
</template>

<script setup lang="ts">
import {ref, Directive, DirectiveBinding} from 'vue'
import A from './A.vue'
// 自定义指令
let flag = ref<boolean>(true)
// 指令命名必须以 vNameOfDirective 的形式， 才可以直接在模板上使用
type Dir = {
    background: string,
    flag: boolean
}
let vMove: Directive = {
    // vue2的指令周期  bind(被绑定) 、 inserted(被插入) 、 update(开始更新) 、 componentUpdated(更新完成)  、 unbind(解除绑定)
    // vue3指令 周期 函数钩子
    created() {
        console.log("元素初始化的时候 ====> created");
    },
    beforeMount() {
        console.log("指令绑定到元素后调用，只调用一次 ====> beforeMount");
    },
    // mounted(...args: Array<any>) {
    //     console.log("元素插入父级dom调用 ====> mounted");
    //     console.log(args);  // 打印查看参数有哪些
    //     /*
    //         第一个参数 el
    //         第二个参数 dir,里面参数如下：
    //             { arg(参数): aaa, dir(里面是周期钩子): {} , instance(实例): Proxy{} , modifiers(修饰符) , oldVlaue: {} , value: {background: 'red'} }
    //     */
    // },
    mounted(el:HTMLElement, binding: DirectiveBinding<Dir>) {     // <Dir> 泛型作类型推导，可以 提示 binding.value. 后面的值
        console.log("元素插入父级dom调用 ====> mounted");
        // 赋值
        el.style.background = binding.value.background
    },
    beforeUpdate() {
        console.log("元素被更新之前调用 ====> beforeUpdate");
    },
    updated() {
        console.log("元素被更新完成调用 ====> updated");
    },
    beforeUnmount() {
        console.log("元素被移除之前调用 ====> beforeUnmount");
    },
    unmounted() {
        console.log("指令被移除后调用，只调用一次 ====> unmounted");
    },
}
</script>

<style scoped>

</style>